<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .showUp a span {
            color: red;
        }
        .showDown a span {
            color: black;
        }
    </style>

    <script src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div').click(function () {
                if ($('ul li:gt(5)').is(':hidden')) {
                    $('ul li:gt(5):not(:last)').show();
                    $(this).find('span').text("展示精品")
                    $(this).removeClass();
                    $(this).addClass("showDown")
                } else {
                    $('ul li:gt(5):not(:last)').hide();
                    $(this).find('span').text("显示全部")
                    $(this).removeClass();
                    $(this).addClass("showUp")
                }

            })
        })
    </script>
</head>
<body>
    <ul>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>鸿基</li>
        <li>全部</li>
    </ul>
    <div>
        <a href="javascript:void(0)"><span>显示全部</span></a>
    </div>
</body>
</html>